<!--
 * @Description: 地图定位选择页面
 * @Author: JiangMing
 * @Date: 2021-09-8 17:38:00
 * @LastEditors: JiangMing
 * @LastEditTime: 2021-09-9 14:15:00
-->
<template>
  <view class="page page-detail-content">
    <map
      id="map"
      ref="map"
      class="map-view"
      :longitude="center.longitude"
      :latitude="center.latitude"
      :markers="markers"
      :circles="circles"
      :show-location="true"
      @tap="mapClick"
    >
      <cover-view class="search">
        <MapSearch ref="mapSearch" :center="center" @change="searchChange" />
      </cover-view>
      <cover-view class="footer">
        <button v-if="currentPoi.title" class="btn-primary" @click="submit">确定位置</button>
      </cover-view>
    </map>
  </view>
</template>

<script>
import MapSearch from '@/components/mapSearch';

export default {
  components: {
    MapSearch
  },
  data() {
    return {
      position: {},
      center: {
        longitude: 113.321676,
        latitude: 23.13081,
      },
      centerMarker: {
        id: 'event-center',
        iconPath: '../../static/images/location.png',
        width: 32,
        height: 32,
        anchor: { x:.5, y:1 }
      },
      currentPoi: {},
    }
  },
  onLoad(options) {
    const { lng, lat } = options;
    if (lng && lat) {
      this.center = {
        longitude: lng,
        latitude: lat
      }
    }

    // #ifdef APP-NVUE
    this.eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
    // #endif
    // #ifndef APP-NVUE
    this.eventChannel = this.getOpenerEventChannel();
    // #endif
  },
  onReady() {
    this.mapCtx = uni.createMapContext('map', this);
    console.log(this.mapCtx)
  },
  computed: {
    markers() {
      let res = [{
        ...this.centerMarker,
        ...this.center
      }];
      let location = this.currentPoi.location;
      if (location) {
        res.push({
          id: 'poi',
          longitude: location.lng,
          latitude: location.lat,
          iconPath: '../../static/images/ding.png',
          width: 32,
          height: 32,
          anchor: { x:.5, y:1 }
        })
      }
      console.log(res)
      return res;
    },
    circles() {
      return [{
        radius: 500,
        strokeWidth: 1,
        color: '#FFFFFF',
        fillColor: '#027AFF33',
        ...this.center
      }]
    }
  },
  methods: {
    mapClick(e) {
      if (!e.detail.x) {
        this.$refs.mapSearch.searchBlur();
      }
    },
    searchChange(data) {
      this.currentPoi = data;
    },
    submit() {
      this.eventChannel.emit('mapLocation', this.currentPoi)
      uni.navigateBack();
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  .map-view {
    height: 100%;
    width: 100%;
  }
  .search {
    overflow: visible;
    padding: 20rpx 30rpx;
  }
  .footer {
    position: absolute;
    bottom: 30rpx;
    width: 100%;
    padding: 0 32rpx;
    box-sizing: border-box;
  }
}
</style>